<template>
	<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
		<div>
			<el-select filterable v-model="localQueryParams.projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目" disabled>
				<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
			</el-select>
			<el-select disabled v-model="localQueryParams.wtBrandName" class="zs-select-md zs-space-right-sm" placeholder="品牌">
				<el-option v-for="item in brandFirstBizTypes" :key="item.wtBrandName" :label="item.wtBrandName" :value="item.wtBrandName" />
			</el-select>
			<el-select filterable v-model="localQueryParams.sourceType" class="zs-select-md zs-space-right-sm" placeholder="欠款口径" disabled>
				<el-option v-for="item in arrearsTypeDropdownRespList" :key="item.code" :label="item.name" :value="item.code" />
			</el-select>
			<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
				<template #reference>
					<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': localQueryParams.chargetypeGroupId.length > 0 || localQueryParams.chargetypeIdList.length > 0 || localQueryParams.startMonth || localQueryParams.endMonth }">
						<el-icon>
							<MoreFilled />
						</el-icon>
					</el-button>
				</template>
				<template #default>
					<el-select disabled filterable @change="changeCharge" v-model="localQueryParams.chargetypeGroupId" class="zs-select-md zs-space-right-sm" placeholder="费项类型" multiple collapse-tags collapse-tags-tooltip clearable :teleported="false">
						<el-option v-for="item in chargeTypeList" :key="item.feeItemId" :label="item.feeItemName" :value="item.feeItemId" />
					</el-select>
					<el-select disabled filterable v-model="localQueryParams.chargetypeIdList" class="zs-select-md zs-space-right-sm" placeholder="费项名称" multiple collapse-tags collapse-tags-tooltip clearable :teleported="false">
						<el-option v-for="item in chargeTypeSecondList" :key="item.feeItemId" :label="item.feeItemName" :value="item.feeItemId" />
					</el-select>
					<el-date-picker class="zs-space-right-sm" v-model="localQueryParams.startMonth" type="month" value-format="YYYY-MM" placeholder="权责开始月" clearable :disabled-date="disabledDateStart" :teleported="false" />
					<el-date-picker class="zs-space-right-sm zs-space-top-sm" v-model="localQueryParams.endMonth" type="month" value-format="YYYY-MM" placeholder="权责结束月" clearable :disabled-date="disabledDateEnd" :teleported="false" />
				</template>
			</el-popover>
			<el-button @click="queryList" class="zs-btn-plain">查询</el-button>
		</div>
		<div>
			<el-button class="zs-btn-plain" @click="handleDownload">
				<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
			</el-button>
		</div>
	</div>
</template>

<script setup>
	import detailApi from '@/api/Manage/Business/detailPages';
	import { getBrandNameDropdownApi, getDropDownListApi } from '@/api/SpecialReport/receivable';
	import { getArrearsBillExportApi } from '@/api/SpecialReport/netReceipts';
	import { downloadNewFile } from '@/utils/publicUtils';
	import { reactive, ref } from 'vue';
	import { useRoute } from 'vue-router';
	const route = useRoute();
	const props = defineProps({
		queryParams: {
			type: Object,
			required: true,
		},
	});

	const emit = defineEmits(['queryList', 'handleSwitch']);

	const localQueryParams = reactive({ ...props.queryParams });

	const queryList = () => {
		emit('queryList', localQueryParams);
	};

	//欠款口径
	const arrearsTypeDropdownRespList = ref([
		{ code: 0, name: '账单口径' },
		{ code: 1, name: '权责口径' },
		{ code: 2, name: '考核口径' },
	]);

	const projectList = ref([]);
	const brandFirstBizTypes = ref([]);
	function getBrandfirstBizType() {
		//项目
		getDropDownListApi().then(res => {
			if (res.data.code != 200) return;
			projectList.value = res.data.data.projectDropdownRespList || []; //项目
		});
	}

	//费项树
	let chargeTypeList = ref([]);
	const getDebtChargeList = async () => {
		let res = await detailApi.getChargeListApi(route.query.projectCode);
		chargeTypeList.value = res.data.data || [];
	};

	//费项名称
	const chargeTypeSecondList = ref([]);
	const getChargeNameList = async() => {
		let res = await detailApi.getChargeNameByTypeListApi({feeItemId: localQueryParams.chargetypeGroupId, projectCode: route.query.projectCode});
		chargeTypeSecondList.value = res.data.data || [];
	};

	// 收缴率-品牌
	const getBrandList = () => {
		getBrandNameDropdownApi({ projectCode: route.query.projectCode }).then(res => {
			if (res.data.errorCode != 200) return;
			brandFirstBizTypes.value = res.data.data || [];
		});
	};

	//费项分类改变
	const changeCharge = () => {
		localQueryParams.chargetypeIdList = [];
		getChargeNameList()
	};

	//导出
	const handleDownload = async () => {
		let params = Object.assign({}, localQueryParams);
		let fileData = await getArrearsBillExportApi(params);
		downloadNewFile(fileData.data, '收缴率费项明细.xls');
	};

	//时间判断
	const disabledDateStart = date => {
		if (!localQueryParams.endMonth) return false;
		return date.getTime() > new Date(localQueryParams.endMonth).getTime();
	};

	const disabledDateEnd = date => {
		if (!localQueryParams.startMonth) return false;
		return date.getTime() < new Date(localQueryParams.startMonth).getTime();
	};
	
	getDebtChargeList();
	getBrandfirstBizType();
	getBrandList();
	getChargeNameList();
</script>
